<template>
  <div style="width:100%">
    <div v-if="mixEditable">
      <el-steps :active="active" :direction="direction" finish-status="success">
          <el-step v-for="(item, index) in steps" :key="index" :title="item.title"></el-step>
      </el-steps>
      <pm-frame v-for="(item, index) in resources" :key="index" :view-id="item.viewId" v-show="showFrame(index)" />
      <el-button v-if="active < stepNumber - 1" style="margin-top: 12px" @click="next">下一步</el-button>
      <el-button v-if="active > 0" style="margin-top: 12px" @click="pre">上一步</el-button>
    </div>
  </div>
</template>
<script>
import { isEmpty } from "lodash"
export default {
  name: 'formSteps',
  props: {
    value:'',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    isInChildren: {
      type: Boolean,
      default: false
    },
    stepNumber: {
      type: Number,
      default: 3
    },
     direction: {
      type: String,
      default: 'horizontal'
    },
    resourceLists: {
       type: Array,
       default: () => []
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    steps() {
      let lists = []
      for (let i = 0; i < this.stepNumber; i++) {
        const stepObj = { title: `第${i + 1}步` }
        lists.push(stepObj)
      }
      return lists
    },
    resources() {
      return isEmpty(this.resourceLists) ? this.steps : this.resourceLists
    }
  },
  data() {
    return {
     active: 0
    }
  },
  watch: {
    
  },
  mounted(){
  },
  methods: {
    next() {
      const len = this.stepNumber - 1
      if (this.active++ > len) this.active = 0
    },
    pre() {
      const len = this.stepNumber - 2
      if (this.active-- < len) this.active = 0
    },
    showFrame(i) {
      return i == this.active
    }
  }
}
</script>
<style lang="scss" scoped>
</style>